<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="test">

</div>


<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    let id = "chengheng"

    function Good(props) {
        return "dfff";
    }

    // jsx标签，会转成html标签
    let vDom = (
            <div>
                <h2 className="title" id={id}>
                    <span style={{color: "white", fontSize: "29px"}}>hello,react</span>
                </h2>
                <input type="text" />
                <Good></Good>
            </div>
    )
    // {} 只可以用表达式，不能写语句
    // 内联样式，要用驼峰
    // 只能一个根标签, 标签必须有闭合
    // 小写标签，变成html的标签

    ReactDOM.render(vDom, document.getElementById("test"))
</script>

</body>
</html>